<template>
	<view class="search">
		<!-- <navbar :isBack="true" title="搜索" titleTextAlign="left"></navbar> -->

		<view class="header">
			<headerSearch style="flex: 1;" bg-color="#EEEEEE" :isClear="false" @searchBlur="searchBlur">
			</headerSearch>
			<!-- <button v-if="!isSou" @click="search"></button> -->
			<view class="btn" @click="search">
				搜索
			</view>
		</view>
		<view class="history">
			<view class="title">
				<text>历史搜索</text>
				<view class="right">
					<view class="showList" @click="isShowList=!isShowList">
						<text>展开/收起</text>
						<image :style="{transform:isShowList?'rotate(180deg)':'rotate(0deg)',transition:'all .3s'}"
							:src="$img_path('/course/img/10.png')" mode="widthFix"></image>
					</view>
					<image :src="$img_path('/course/img/8.png')" @click="delRlist" mode="widthFix"></image>
				</view>
			</view>
			<view class="h-list" v-if="isShowList">
				<view class="item" v-for="(item,i) in r_list" :key="i" @click.stop="r_click(item.text)">
					{{item.text}}
					<image v-if="flag" :src="$img_path('/course/img/11.png')" @click.stop="delItem(i)" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<view class="hot">
			<view class="title">
				热门搜索
			</view>
			<view class="hot-list">
				<view class="hot-item" @click="searchValue = item.name,search()" :class="i<3?'b-sty' : ''" v-for="(item,i) in hot_list" :key="i">
					<text>{{i+1}}</text>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<!-- <view class="screen" v-if="isSou">
			<view class="tab">
				<view class="tab-item" :class="tab==1 ? 'select' : ''" @click="tabClick(1)">
					<text>综合</text>
				</view>
				<view class="tab-item" :class="tab==2 ? 'select' : ''" @click="tabClick(2,sort)">
					<text>价格</text>
					<image v-if="sort_price==1" src="../../static/mall/sort_1.png" mode="widthFix"></image>
					<image v-if="sort_price==2" src="../../static/mall/sort_2.png" mode="widthFix"></image>
				</view>
				<view class="tab-item" :class="tab==3 ? 'select' : ''" @click="tabClick(3,sort)">
					<text>销量</text>
					<image v-if="sort_num==1" src="../../static/mall/sort_1.png" mode="widthFix"></image>
					<image v-if="sort_num==2" src="../../static/mall/sort_2.png" mode="widthFix"></image>
				</view>
				<view class="tab-item box-style" @click="tabClick(4,box_style)">
					<image v-if="box_style==1" src="@/static/mall/icon_1.png" mode="widthFix"></image>
					<image v-if="box_style==2" src="@/static/mall/icon_2.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="p-list" v-if="isSou">
			<goodsBox class="item" v-for="(item,i) in 3" :key="i" :style="{width: box_style==1 ? 'calc(50% - 13rpx)' : '100%'}" :styleType="box_style"></goodsBox>
		</view> -->
	</view>
</template>

<script>
	import {
		rmSearch
	} from '@/utils/api/public.js'
	import headerSearch from '@/components/header-search/header-search.vue'
	export default {
		components: {
			headerSearch,
		},
		data() {
			return {
				isSou: false,
				r_list: [],
				name: '',
				sort_price: 1,
				sort_num: 1,
				tab: 1,
				box_style: 1,
				goodsList: [],
				searchValue: '',
				isShowList: true,
				hot_list: [],
				flag:false
			};
		},
		onLoad() {

		},
		onShow() {
			this.getRlist()
			this.getHot()
		},
		methods: {

			getHot() {
				rmSearch({
					type: 1
				}).then(res => {
					this.hot_list = res.data
				})
			},


			getRlist() {
				if (uni.getStorageSync('r_list_mall')) {
					this.r_list = JSON.parse(uni.getStorageSync('r_list_mall'))
				} else {
					this.r_list = []
				}
			},
			getGoods() {
				// this.$http.product_list({
				// 	name:this.name,
				// 	sort:this.sort
				// }).then(res=>{
				// 	this.goodsList = res.data
				// })
			},
			searchBlur(val) {
				this.searchValue = val.detail.value
				if (this.searchValue == '') {
					this.isSou = false
				}
			},
			tabClick(type, val) {
				switch (type) {
					case 1:
						break;
					case 2:
						if (this.tab == type) {
							if (this.sort_price == 1) {
								this.sort_price = 2
							} else {
								this.sort_price = 1
							}
						}
						break;
					case 3:
						if (this.tab == type) {
							if (this.sort_num == 1) {
								this.sort_num = 2
							} else {
								this.sort_num = 1
							}
						}
						break;
					default:
						if (this.box_style == 1) {
							this.box_style = 2
						} else {
							this.box_style = 1
						}
						break;
				}
				if (type != 4) {
					this.tab = type
				}
			},

			search() {
				if (this.searchValue) {
					this.isSou = true
				} else {
					this.isSou = false
				}
				console.log(this.searchValue)
				if (this.searchValue && this.r_list.filter((e) => {
						return e.text == this.searchValue
					}).length < 1) {
					this.r_list.push({
						text: this.searchValue
					})
					uni.setStorageSync('r_list_mall', JSON.stringify(this.r_list))
				}

				uni.navigateTo({
					url: `/pagesMall/search/list?content=${this.searchValue}&title=搜索&type=1`
				})
			},
			close() {
				this.name = ''
				// this.getGoods()
				// this.getRlist()
			},
			r_click(text) {
				uni.navigateTo({
					url: `/pagesMall/search/list?content=${text}&title=搜索&type=1`
				})
				// this.name = text
				// this.getGoods()
			},
			delItem(i) {
				this.r_list.splice(i, 1)
				uni.setStorageSync('r_list_mall', JSON.stringify(this.r_list))
			},
			delRlist() {
				this.flag = !this.flag
				// uni.showModal({
				// 	content: '确定删除历史记录？',
				// 	success: (res) => {
				// 		if (res.confirm) {
				// 			uni.removeStorageSync('r_list_mall')
				// 			this.getRlist()
				// 		}
				// 	}
				// })

			}
		}
	}
</script>
<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.search {
		box-sizing: border-box;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			z-index: 9;
			padding: 20rpx 30rpx 0;
			background-color: #FFFFFF;
			// padding-right: 160rpx;
			box-sizing: border-box;

			.btn {
				
				width: 154rpx;
				// height: 100%;
				background: #E72A2A;
				border-radius: 72rpx;
				font-weight: bold;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 72rpx;
				text-align: center;
				position: absolute;
				top: 20rpx;
				right: 22rpx;
				z-index: 9999999999999999999999;
			}
		}

		.history {
			margin-top: 40rpx;
			padding: 0 30rpx;

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				&>text {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					line-height: 42rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.right {
					display: flex;
					align-items: center;

					.showList {
						display: flex;
						align-items: center;

						image {
							width: 24rpx;
							height: 24rpx;
							margin-left: 12rpx;
						}
					}

					&>image {
						width: 40rpx;
						height: 42rpx;
						margin-left: 52rpx;
					}
				}

			}

			.h-list {
				width: calc(100% + 15rpx);
				display: flex;
				flex-wrap: wrap;

				.item {
					// min-width: 136rpx;
					height: 64rpx;
					margin-right: 17rpx;
					background-color: #F5F5F5;
					border-radius: 30rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					line-height: 64rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
					padding: 0 20rpx;
					box-sizing: border-box;
					margin-top: 40rpx;
					display: flex;
					align-items: center;
					position: relative;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-left: 8rpx;
						position: absolute;
						right: 0;
						top: 0;
						transform: translateX(40%) translateY(-40%);
					}
				}
			}
		}

		.s-drow {
			position: relative;
		}

		.screen {
			padding: 30rpx 30rpx 0;

			.tab {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 16rpx 24rpx 14rpx;
				background-color: #FFFFFF;
				border-radius: 10rpx;
				margin-bottom: 32rpx;

				.tab-item {
					display: flex;
					justify-content: center;
					align-items: center;

					text {
						font-weight: bold;
						font-size: 32rpx;
						color: #999999;
						line-height: 44rpx;
					}

					&.select {
						text {
							color: #FD845C;
						}
					}

					image {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}

		.p-list {
			padding: 24rpx 30rpx 64rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		.hot {
			padding: 40rpx 24rpx 0;
			box-sizing: border-box;

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 38rpx;
				color: #333333;
				line-height: 42rpx;
			}

			.hot-list {
				

				.hot-item {
					// padding: 10rpx 0;
					display: flex;
					align-items: center;
					margin-top: 30rpx;

					&>text {
						&:nth-child(1) {
							display: block;
							width: 30rpx;
							height: 30rpx;
							text-align: center;
							line-height: 30rpx;
							font-size: 26rpx;
							color: #333333;
							background-color: #FFFFFF;
							border: 1rpx solid #999999;
							border-radius: 6rpx;
						}

						&:nth-child(2) {
							margin-left: 10rpx;
							font-size: 32rpx;
							line-height: 30rpx;
							color: #333333;
						}
					}

					&.b-sty {
						text {
							&:nth-child(1) {
								color: #FFFFFF;
								background-color: #999999;
							}
						}
					}
				}
			}
		}
	}
</style>